<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="queryForm.name" placeholder="请输入商品名称"/>
            <EdCascader ref="CascaderRef" v-model="queryForm.categoryId" :cascaderParams="cascaderParams"></EdCascader>
            <EdSelect v-model="queryForm.publishStatus" :selectParams="selectParams1"></EdSelect>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="商品管理列表">
            <template #actions>
                <el-button class="ed-button ed_black-bottom ed-button36" @click="add()" v-has="'shopping:onLine:add'"><svg-icon icon-class="add-svg"/>添加商品</el-button>
            </template>
            <ApiTable :api="load" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productNo" label="商品编码"/>
                <el-table-column :show-overflow-tooltip="true" prop="productName" label="商品名称"/>
                <el-table-column :show-overflow-tooltip="true" prop="categoryName" label="商品类别"/>
                <el-table-column :show-overflow-tooltip="true" prop="money" label="价格"/>
                <el-table-column :show-overflow-tooltip="true" prop="productSource" label="来源"/>
                <el-table-column :show-overflow-tooltip="true" prop="publishStatus" label="上架">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.publishStatus" :active-value="activeValue" :inactive-value="inactiveValue" @change="changeShowStatus(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="操作">
                    <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" v-has="'shopping:onLine:update'" @click="updateRow(scope.row)">编辑</el-button>
                        <el-button class="ed-table-bottom ed_delete_border" v-has="'shopping:onLine:delete'" :disabled="scope.row.publishStatus == 1" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <ed-confirm-delete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue()"></ed-confirm-delete>
    </Page>

</template>

<script>
    import {productOndelete ,getAllCategory ,availableType ,productOnList ,shelfProduct ,unShelfProduct} from "src/api/shoppingMall";
    import EdSelect from 'src/components/EdSelect.vue'
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import Page from '../../components/Page.vue'
    import EdCascader from 'src/components/EdCascader.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    export default {
        name: "lineIndex",
        components:{
            EdConfirmDelete,
            Page, PageCard, ApiTable,
            EdSelect,
            EdCascader
        },
        data(){
            return{
                queryForm:{
                    name:"",
                    publishStatus:"",
                    categoryId:""
                },
                confirmRow:{},
                cascaderParams:{
                    placeholder:"请选择商品类别",
                    props:{label:'categoryName',value:'id',emitPath:false},
                    options: []
                },
                selectParams1:{
                    placeholder:"请选择商品状态",
                    options:[
                        {label:"上架", value:1},
                        {label:"未上架", value:2},
                    ],
                    props: {label:"label", value:"value"}
                },
                activeValue:1,
                inactiveValue:2,
            }
        },
        mounted(){
            this.availableType();
            this.getAllCategory();
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })

        },
        methods:{
            load:productOnList,
            search(){
                this.$refs.table.load(1)
            },
            getAllCategory(){
                //实物商品
                getAllCategory({id:0}).then(response => {
                    if(response.code == 20000) {
                        this.cascaderParams.options = response.data
                    }
                })
            },
            availableType(){
                availableType().then(response => {
                    if(response.code == 20000) {
                        this.selectParams.options = response.data
                    }
                })
            },
            changeShowStatus(row){
                let urlFn = null;
                // 上架是1 没有点过是0 下架了是2
                if(row.publishStatus == 1){
                    urlFn = shelfProduct;
                }else {
                    urlFn = unShelfProduct;
                }
                urlFn({id:row.id}).then(() => {})
            },
            add(){
                this.$router.push({
                    path: '/shopping/line-create'
                })
            },
            updateRow(row) {
                this.$router.push({
                    path: '/shopping/line-create',
                    query: { id: row.id },
                })
            },
            del(row) {
                this.confirmRow = row;
                this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
            },
            confirmDeleteTrue(){
                productOndelete({id: this.confirmRow.id}).then(response => {
                    if(response.code == 20000) {
                        this.$message.success({
                            message: '商品已删除成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                    }
                })
            },
            reset(){
                this.queryForm = {
                    name:"",
                    publishStatus:"",
                    categoryId:""
                };
                this.$nextTick(()=>{
                    this.$refs.table.load(1,10)
                })
            }
        }
    }
</script>

<style scoped>

</style>